const heros = herosListData.hero
const tbody = document.querySelector('#heros tbody')

//需要的字段
const tabKeys = ["heroId", "name", "alias", "title", "roles", "isWeekFree", "avatar", "selectAudio"]

const Olaf = heros[1]
// //创建一个tr
// const OlafTr = document.createElement('tr')
// //创建一个td
// const OlafTd1 = document.createElement('td')
// //给td添加内容
// OlafTd1.innerText = Olaf.heroId
// //把td放到tr里面
// OlafTr.appendChild(OlafTd1)

// const OlafTd2 = document.createElement('td')
// //给td添加内容
// OlafTd2.innerText = Olaf.name
// //把td放到tr里面
// OlafTr.appendChild(OlafTd2)

// const OlafTd3 = document.createElement('td')
// //给td添加内容
// OlafTd3.innerText = Olaf.alias
// //把td放到tr里面
// OlafTr.appendChild(OlafTd3)
// for(var i=0;i<tabKeys.length;i++){
//     let td = document.createElement('td')
//     let key = tabKeys[i]

//     if(key === "avatar"){
//         let src = `https://game.gtimg.cn/images/lol/act/img/champion/${Olaf.alias}.png`
//         let imgEle = document.createElement('img')
//         imgEle.src = src
//         // imgEle.setAttribute('src',src)
//         td.appendChild(imgEle)
//     }else if(key === "selectAudio"){
//         let src = Olaf[key]
//         let audioEle = document.createElement('audio')
//         audioEle.src = src
//         //让音频文件的控制面板显示
//         audioEle.controls = true
//         td.appendChild(audioEle)
//     }else{
//         let text = Olaf[key]
//         td.innerText = text
//     }
//     OlafTr.appendChild(td)
// }
// 

// tbody.appendChild(OlafTr)


// const rawHtml = tbody.innerHTML
// tbody.innerHTML = rawHtml + OlafHtml

// let herosHtml = ''
// for (let i in heros) {
//     const hero = heros[i]
//     const heroHtml = `
//     <tr>
//         <td>${hero.heroId}</td>
//         <td>${hero.name}</td>
//         <td>${hero.alias}</td>
//         <td>${hero.title}</td>
//         <td>${hero.roles}</td>
//         <td>${hero.isWeekFree === '0' ? '否' : '是'}</td>
//         <td>
//             <img src="https://game.gtimg.cn/images/lol/act/img/champion/${hero.alias}.png" alt="">
//         </td>
//         <td>
//             <audio controls src="${hero.selectAudio}"></audio>
//         </td>
//     </tr>`
//     herosHtml += heroHtml
// }
// tbody.innerHTML = herosHtml

const herosHtmlArr = heros.map(function(hero){
    const heroHtml = `
    <tr>
        <td>${hero.heroId}</td>
        <td>${hero.name}</td>
        <td>${hero.alias}</td>
        <td>${hero.title}</td>
        <td>${hero.roles}</td>
        <td>${hero.isWeekFree === '0' ? '否' : '是'}</td>
        <td>
            <img src="https://game.gtimg.cn/images/lol/act/img/champion/${hero.alias}.png" alt="">
        </td>
        <td>
            <audio controls src="${hero.selectAudio}"></audio>
        </td>
    </tr>`
    return heroHtml
})

tbody.innerHTML = herosHtmlArr.join('')

// const arr1 = [1,2,3,4,5]
// const arr2 = arr1.map(function(item,index,arr){
//     return item*2
// })